<template>
  <div >
    <h1>欢迎来到足球后台管理系统</h1>
    <el-row :gutter="10" style="margin-bottom: 40px">
      <el-col :span="4">
        <el-card style="color:#E47833">
          <div ><i class="el-icon-user-solid"></i>用户总数</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold;">
          {{ numbersdata[1] }}
          </div>
        </el-card>
      </el-col>   
      <el-col :span="5">
        <el-card style="color:#EAEAAE">
          <div ><i class="el-icon-collection-tag"></i>联赛数量</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold;">
            {{ numbersdata[4] }}
        </div>
        </el-card>

      </el-col> 

      <el-col :span="5">
        <el-card style="color:#A68064">
          <div ><i class="el-icon-collection-tag"></i>球队数量</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold;">
            {{ numbersdata[2] }}
        </div>
        </el-card>

      </el-col>  
      <el-col :span="5">
        <el-card style="color:#6B238E">
          <div ><i class="el-icon-user"></i>球员数量</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold;">
            {{ numbersdata[3] }}
        </div>
        </el-card>

      </el-col>  
      <el-col :span="5">
        <el-card style="color:#238E23">
          <div ><i class="el-icon-football"></i>比赛数量</div>
          <div style="padding:10px 0;text-align: center;font-weight: bold;">
            {{ numbersdata[5] }}
        </div>
        </el-card>
      </el-col>    
    </el-row>


    <el-row>
      <el-col :span="12">
        <div id="main" style="width:500px;height:400px"></div>
      </el-col>
      <el-col :span="12">
      <div id="pie" style="width:500px;height:400px"></div>
      </el-col>
    </el-row>
    
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name:'Home',
  data(){
    return{
      numbersdata:[]
    }
  },
  created(){
    this.load()
  },
  mounted(){ //页面元素渲染之后再触发
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    //用户角色折线图
    var option = {
      xAxis: {
        type: 'category',
        data: ["管理员", "超级管理员", "用户"]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name:"ssss",
          data: [],
          type: 'line'//折线图
        },
        {
          data: [],
          type: 'bar'//柱状图
        }
      ]
    };
    this.request.get("/echarts/rolepie").then(res =>{
      option.series[0].data = res.map.count;
      option.series[1].data = res.map.count;
      myChart.setOption(option)
    })



    //用户角色饼状图
    var pieDom = document.getElementById("pie");

    var pieChart = echarts.init(pieDom);

    var pieOption = {
      title: {
          text: '用户角色分配',
          subtext: '图示',
          left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                // { value: 1048, name: 'Search Engine' },
                // { value: 735, name: 'Direct' },
                // { value: 580, name: 'Email' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
    } 

    this.request.get("/echarts/rolepie").then(res =>{
        console.log(res.map.count)
        pieOption.series[0].data = [
          {name:"管理员",value:res.map.count[0]},
          {name:"超级管理员",value:res.map.count[1]},
          {name:"用户",value:res.map.count[2]},
        ]
        pieChart.setOption(pieOption)
      })
    
  },
  methods:{
    load(){
     this.request.get("/statistics/numbers").then(res=>{
        console.log(res.data)
        this.numbersdata=res.data
    }) 
    }
    
  }
}
</script>

<style>

</style>